<template>
  <div class="user-order-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
          v-model="searchForm.keyword"
          placeholder="请输入订单号"
          style="width: 200px; margin-right: 10px;"
          clearable
      ></el-input>
      <el-select v-model="searchForm.status" placeholder="订单状态" clearable style="width: 150px; margin-right: 10px;">
        <el-option label="待接单" value="pending"></el-option>
        <el-option label="已接单" value="accepted"></el-option>
        <el-option label="已完成" value="completed"></el-option>
        <el-option label="已取消" value="cancelled"></el-option>
      </el-select>
      <el-button type="primary" @click="searchOrders">搜索</el-button>
    </div>

    <!-- 订单列表 -->
    <el-table
        :data="orderList"
        style="width: 100%; margin-top: 20px;"
        v-loading="loading"
    >
      <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="address" label="回收地址"></el-table-column>
      <el-table-column prop="recycleType" label="回收类型" width="120"></el-table-column>
      <el-table-column prop="weight" label="预估重量" width="120"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{getStatusText(scope.row.status)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="viewDetail(scope.row)">查看详情</el-button>
          <el-button
              type="text"
              @click="cancelOrder(scope.row)"
              v-if="scope.row.status === 'pending'"
          >取消订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
      </el-pagination>
    </div>

    <!-- 订单详情弹窗 -->
    <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="50%">
      <div class="order-detail" v-if="currentOrder">
        <div class="detail-item">
          <span class="label">订单号：</span>
          <span>{{currentOrder.orderNo}}</span>
        </div>
        <div class="detail-item">
          <span class="label">创建时间：</span>
          <span>{{currentOrder.createTime}}</span>
        </div>
        <div class="detail-item">
          <span class="label">回收地址：</span>
          <span>{{currentOrder.address}}</span>
        </div>
        <div class="detail-item">
          <span class="label">回收类型：</span>
          <span>{{currentOrder.recycleType}}</span>
        </div>
        <div class="detail-item">
          <span class="label">预估重量：</span>
          <span>{{currentOrder.weight}}</span>
        </div>
        <div class="detail-item">
          <span class="label">订单状态：</span>
          <span>{{getStatusText(currentOrder.status)}}</span>
        </div>
        <div class="detail-item">
          <span class="label">备注：</span>
          <span>{{currentOrder.remark || '无'}}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UserRecycleOrder',
  data() {
    return {
      searchForm: {
        keyword: '',
        status: ''
      },
      loading: false,
      orderList: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      detailDialogVisible: false,
      currentOrder: null
    }
  },
  methods: {
    // 搜索订单
    searchOrders() {
      this.loading = true
      // TODO: 调用接口获取订单列表
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    // 查看详情
    viewDetail(order) {
      this.currentOrder = order
      this.detailDialogVisible = true
    },
    // 取消订单
    cancelOrder(order) {
      this.$confirm('确认取消该订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用取消订单接口
        this.$message.success('订单已取消')
        this.searchOrders()
      }).catch(() => {})
    },
    // 获取状态标签类型
    getStatusType(status) {
      const statusMap = {
        pending: 'warning',
        accepted: 'primary',
        completed: 'success',
        cancelled: 'info'
      }
      return statusMap[status] || 'info'
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        pending: '待接单',
        accepted: '已接单',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    handleSizeChange(val) {
      this.page.size = val
      this.searchOrders()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.searchOrders()
    }
  },
  mounted() {
    this.searchOrders()
  }
}
</script>

<style lang="less" scoped>
.user-order-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;

  .search-area {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }

  .order-detail {
    .detail-item {
      margin-bottom: 15px;

      .label {
        display: inline-block;
        width: 100px;
        color: #606266;
      }
    }
  }
}
</style>